<script lang="ts" setup>
import { ref } from 'vue';
import { KeyValues } from '../../utils/types';

const cls = 'com-test-response'
const props = defineProps<{
  resData: KeyValues
}>()
enum TypeValue { BODY, COOKIES, HEADERS }

const types = ref([
  { label: 'Body', value: TypeValue.BODY },
  { label: 'Cookies', value: TypeValue.COOKIES },
  { label: 'Headers', value: TypeValue.HEADERS }
])
const type = ref(types.value[0].value)
</script>

<template>
  <div :class="cls">
    <div :class="`${cls}_header`">
      <ElRadioGroup v-model="type">
        <ElRadioButton v-for="_ in types" :key="_.value" :label="_.value">
          {{ _.label }}
        </ElRadioButton>
      </ElRadioGroup>
      <p class="spring"></p>
      <div :class="`${cls}_info`">
        Status: <strong>{{ props.resData.httpCode }}</strong>
        Time: <strong>33ms</strong>
        Size: <strong>5088B</strong>
      </div>
    </div>
    <div :class="`${cls}_main`">
      <div v-if="type === TypeValue.BODY" :class="`${cls}_links`">
        <ElLink :underline="false">Pretty</ElLink>
        <ElLink :underline="false">Raw</ElLink>
      </div>
      <div :class="`${cls}_content`">this is a content.</div>
    </div>
  </div>
</template>

<style lang="scss">
.com-test-response {
  &_header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  &_info {
    font-size: 13px;
    strong {
      color: var(--el-color-success);
    }
  }
  &_links {
    margin-bottom: 10px;
    > * + * {
      margin-left: 10px;
    }
  }
}
</style>
